<!-- <script src="js/main.js"></script> -->
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="../vue/css/element.css">
<link rel="stylesheet" href="../vue/css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../vue/js/vue.min.js"></script>
<script src="../vue/js/element.js"></script>
<script src="../vue/js/common.js"></script>

<title>搜索工具</title>
<style>
  *{
    margin:0;
    padding:0;
    border:0;
  }
  .isFixed{
    position:fixed;
    background-color:#Fff;
    top:0;
    z-index:999;
  }
  .top-space{
    margin-top: 40px;
    margin-bottom: 20px;
    width: 99%;
  }
  
  
  </style>
  
  <div id="search" style="overflow: hidden;">
    <el-row type="flex" class="top-space" justify="center" :gutter="20" > 
      <el-col :span="10">
        <div class="">
          <el-input placeholder="搜索内容" v-model="searchData" @keyup.enter.native="searchBaidu()" clearable></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="">
          <el-button type="primary" @click="searchBaidu()">搜索全部</el-button>
        </div></el-col>
    </el-row>
  
    <el-row :class="searchBarFixed == true ? 'isFixed' :''" id="searchBar" >
      <el-tabs  v-model="activeName" @tab-click="handleClick" type="border-card" style="height:0px;">
        <el-tab-pane label="百度" name="baidu">
        </el-tab-pane>
        <el-tab-pane label="360" name="360">
        </el-tab-pane>
        <el-tab-pane label="搜狗" name="sougou">
        </el-tab-pane>
        <el-tab-pane label="必应" name="biying">
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row style="margin-top: 40px;height: 100%;padding:0">
      <iframe  src="https://www.baidu.com/"  name="context"  id="context" class=""  frameborder="0" style="width: 100%;height: 100%" ></iframe>
    </el-row>
  </div>
  
  
  <script>
    var search = new Vue({
    el: '#search',
    data() {
        return {
          searchData:'',
          activeName: 'baidu',
          searchBarFixed:false,
        };
      },
      mounted () {
        window.addEventListener('scroll', this.handleScroll)
        // this.setIframeHeight(document.getElementById('context'));
      },
      methods: {
        iframeAutoFit(iframeObj){
          setTimeout(function(){
            if(!iframeObj) return;
            iframeObj.height=(
              iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight
              );
              },200)
        }, 
        // setIframeHeight(iframe) {
        //   if (iframe) {
        //     var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        //     // if (iframeWin.document.body) {
        //     //   iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        //     // }
            
        //     // console.log("高度",iframe.height,iframeWin.document.documentElement.scrollHeight,iframeWin.document.body.scrollHeight,window.screen.height)
        //     iframe.height=window.screen.height
        //   }
        // },
        // timeChangeHeight(){
        //   iframe=document.getElementById('context')
        //   if (iframe) {
        //     var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        //     // if (iframeWin.document.body) {
        //     //   iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        //     // }
            
        //     console.log("高度",iframe.height)
        //     console.log(iframe.contentDocument.parentWindow.document.documentElement.scrollHeight)
        //     console.log(iframeWin.document.body.scrollHeight)
        //     console.log(window.screen.height)
        //     // iframe.height=window.screen.height
        //   }
        // },
        handleScroll () {
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          let offsetTop = document.querySelector('#searchBar').offsetTop
          scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
        },
        handleClick(tab, event) {
          
          var urlPath;
          if(this.searchData!=''){
            if(tab.name=='baidu'){
              //https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=风景
              urlPath="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd="
  
            }else if(tab.name=='360'){
              //https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q=风景
              urlPath="https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q="
  
            }else if(tab.name=='sougou'){
              //https://www.sogou.com/web?query=风景
              urlPath="https://www.sogou.com/web?query="
  
            }else if(tab.name=='biying'){
              //https://cn.bing.com/search?q=风景
              urlPath="https://cn.bing.com/search?q="
  
            }
            urlPath+=this.searchData
            
          }else{
            if(tab.name=='baidu'){
              urlPath="https://www.baidu.com/"
  
            }else if(tab.name=='360'){
              urlPath="https://www.so.com/"
  
            }else if(tab.name=='sougou'){
              urlPath="https://www.sogou.com/"
  
            }else if(tab.name=='biying'){
              urlPath="https://cn.bing.com/"
  
            }
          }
          document.getElementById('context').src=urlPath
          // this.timeChangeHeight();
          
        },
        searchBaidu(){
          if(this.searchData!=''){
            document.getElementById('context').src="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd="+this.searchData
            this.activeName='baidu'
          }
        }
      }
  })
    
  </script>  
